<template>
  <el-row>
    <el-col v-if="isShow" class="my-el-footer">
      <div class="title">

        <el-row :gutter="20" style="height: 100%;">
          <el-col :lg="{span: '4-8'}" class="card-panel-col"><div class="span"><a href="http://zrzy.hebei.gov.cn/">河北省自然资源厅</a> </div></el-col>
          <el-col :lg="{span: '4-8'}" class="card-panel-col"><div class="span"><a href="https://hebei.tianditu.gov.cn/home/">河北省地理信息公共服务平台</a></div></el-col>
          <el-col :lg="{span: '4-8'}" class="card-panel-col"><div class="span"><a href="http://zygh.tangshan.gov.cn/">唐山市自然资源和规划局</a></div></el-col>
          <el-col :lg="{span: '4-8'}" class="card-panel-col"><div class="span"><a href="http://www.tshg.gov.cn/">海港区人民政府</a></div></el-col>
          <el-col :lg="{span: '4-8'}" class="card-panel-col"><div class="span"><a href="https://www.webmap.cn/main.do?method=index">全国地理信息资源目录服务系统</a></div></el-col>
        </el-row>

      </div>
      <div class="footer-about">
        <div class="about-left">
          <div>
            <a href="/about"> 关于我们 </a>
            <span>| </span>
            <a href="/disclaimer"> 免责声明 </a>
<!--            <span>| </span>-->
<!--            <a href="/contactUs"> 联系我们 </a>-->
<!--            <span>| </span>-->
<!--            <a href="/feedback"> 意见反馈 </a>-->
          </div>
<!--          <div>-->
<!--            主办单位：中共海港区委政法委员会-->
<!--          </div>-->
<!--          <div>
            Copyright@2020 All Rights Reserved 版权所有，未经授权，禁止转载
            备案号：<a
              href="https://beian.miit.gov.cn/#/Integrated/index"
              target="_blank"
          >石ICP备12004565号-4</a
          >
          </div>-->
          <div>
            为了更好的网站体验，建议您使用谷歌浏览器74版本及以上，<a
              href="//soft-dl.v78q.com/softmgr/package/8DF1A6CA-9C71-4296-A2BA-F1648B5B8D00/103.0.5060.114_chrome_installer_win32.exe"
              target="_blank"
          >点击下载</a
          >
          </div>
        </div>
<!--        <div class="about-right" style="margin-left: 20px">-->
<!--          <img-->
<!--              src="@/assets/home/hellofengfeng.png"-->
<!--              alt="二维码"-->
<!--              style="height: 80px"-->
<!--          />-->
<!--        </div>-->
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      isShow: true
    }
  },
  methods:{
    filFooter(){
      let show = this.$route.query.footer || '1';
      this.isShow = show === '1';
    }
  },
  mounted() {
    this.filFooter();
  },
  watch:{
    "$route"(){
      this.filFooter();
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-lg-4-8 {
  width: 20%;
}
.my-el-footer {
  font-size: 14px;
  padding-top: 20px;
  text-align: center;
  color: #aaa;
  background-color: #005aca;
  border-top: 4px solid #c4e6f2;

  a {
    font-size: 14px;
    width: 100%;
    color: #aaa;
    text-decoration: none;

    &:hover {
      color: #282828;
    }
  }

  .title {
    max-width: 1410px;
    margin: 0 auto;
    //padding: 20px 0;

    .span {
      background-color: #409eff2e;
      //padding: 16px 70px;
      padding: 5% 0;
      //margin: 10px;
      //cursor: pointer;
      //font-size: 14px;
    }
  }

  .footer-about {
    margin: 20px auto;
    display: flex;
    justify-content: center;

    .about-left {
      float: left;

      div {
        margin-bottom: 10px;
      }
    }

    .about-right {
      width: 80px;
      height: 80px;
      float: left;
    }
  }
}
</style>